<template>
  <el-drawer
    :title="title"
    :visible.sync="drawerVisible"
    direction="rtl"
    size="67%"
    :before-close="handleCancel"
    custom-class="drawer-container"
  >
    <div class="drawer-content">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <!-- 第一行：当前项目，器具流水号（原器具编码） -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="当前项目" prop="currentProjectId">
              <el-select v-model="form.currentProjectId" placeholder="请选择当前项目" style="width: 100%" @change="handleProjectChange">
                <el-option
                  v-for="project in projectList"
                  :key="project.projectId"
                  :label="project.projectName"
                  :value="project.projectId"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="器具流水号" prop="containerCode">
              <el-input v-model="form.containerCode" placeholder="请输入器具流水号" maxlength="100" />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第二行：器具型号编码，器具型号名称 -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="器具型号编码" prop="materialCode">
              <el-select
                v-model="form.materialCode"
                placeholder="请选择器具型号编码"
                @change="handleMaterialCodeChange"
                :loading="materialLoading"
                filterable
                clearable
                style="width: 100%"
              >
                <el-option
                  v-for="material in materialOptions"
                  :key="material.containerMaterialCode"
                  :label="`${material.containerMaterialCode} - ${material.containerMaterialName}`"
                  :value="material.containerMaterialCode"
                >
                  <span style="float: left">{{ material.containerMaterialCode }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ material.containerMaterialName }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="器具型号名称">
              <el-input
                v-model="form.materialName"
                placeholder="请先选择器具型号编码"
                readonly
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第三行：生产日期，业务状态 -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="生产日期" prop="productionDate">
              <el-date-picker
                v-model="form.productionDate"
                type="date"
                placeholder="选择生产日期"
                value-format="yyyy-MM-dd"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="业务状态" prop="businessStatus">
              <el-select v-model="form.businessStatus" placeholder="请选择业务状态" style="width: 100%">
                <el-option label="正常" value="1" />
                <el-option label="封存" value="2" />
                <el-option label="维修" value="3" />
                <el-option label="报废" value="4" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第四行：当前仓库，位置状态 -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="当前仓库" prop="currentWarehouseId">
              <el-select v-model="form.currentWarehouseId" placeholder="请先选择项目" style="width: 100%" :disabled="!form.currentProjectId">
                <el-option
                  v-for="warehouse in projectWarehouseList"
                  :key="warehouse.warehouseId"
                  :label="warehouse.warehouseName"
                  :value="warehouse.warehouseId"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="位置状态" prop="locationStatus">
              <el-select v-model="form.locationStatus" placeholder="请选择位置状态" style="width: 100%">
                <el-option label="在库" value="1" />
                <el-option label="在途" value="2" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第五行：当前物料编码，当前物料名称 -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="当前物料编码" prop="currentMaterialCode">
              <el-select
                v-model="form.currentMaterialCode"
                placeholder="请先选择器具型号编码"
                @change="handleCurrentMaterialCodeChange"
                :loading="materialLoading"
                filterable
                clearable
                style="width: 100%"
                :disabled="!form.materialCode"
              >
                <el-option
                  v-for="material in filteredMaterialOptions"
                  :key="material.materialCode"
                  :label="`${material.materialCode} - ${material.materialName}`"
                  :value="material.materialCode"
                >
                  <span style="float: left">{{ material.materialCode }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ material.materialName }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="当前物料名称">
              <el-input
                v-model="form.currentMaterialName"
                placeholder="请先选择当前物料编码"
                readonly
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第六行：当前物料数量，当前内衬方案 -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="当前物料数量" prop="currentMaterialQuantity">
              <el-input-number
                v-model="form.currentMaterialQuantity"
                :precision="4"
                :step="0.1"
                :min="0"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="当前内衬方案" prop="currentLiningScheme">
              <el-input
                v-model="form.currentLiningScheme"
                placeholder="请输入当前内衬方案，格式：层板:5;垫块:20;"
                maxlength="500"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第七行：备注 -->
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input
                v-model="form.remark"
                type="textarea"
                placeholder="请输入备注"
                maxlength="500"
                :autosize="{ minRows: 2, maxRows: 4 }"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="drawer-footer">
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
      <el-button @click="handleCancel">取 消</el-button>
    </div>
  </el-drawer>
</template>

<script>
export default {
  name: 'ContainerFormDrawer',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    form: {
      type: Object,
      required: true
    },
    rules: {
      type: Object,
      required: true
    },
    projectList: {
      type: Array,
      default: () => []
    },
    materialOptions: {
      type: Array,
      default: () => []
    },
    filteredMaterialOptions: {
      type: Array,
      default: () => []
    },
    projectWarehouseList: {
      type: Array,
      default: () => []
    },
    materialLoading: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    drawerVisible: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  methods: {
    handleSubmit() {
      console.log('ContainerFormDrawer: 开始表单验证')
      console.log('ContainerFormDrawer: form ref:', this.$refs.form)

      // 检查表单引用是否存在
      if (!this.$refs.form) {
        console.error('ContainerFormDrawer: 表单引用不存在')
        this.$message.error('表单初始化失败，请刷新页面重试')
        return
      }

      // 在子组件中进行表单验证
      this.$refs.form.validate(valid => {
        console.log('ContainerFormDrawer: 表单验证结果:', valid)

        if (valid) {
          console.log('ContainerFormDrawer: 表单验证通过，发出提交事件')
          // 验证通过，发出提交事件
          this.$emit('submit')
        } else {
          console.log('ContainerFormDrawer: 表单验证失败')
          // 验证失败，显示错误提示
          this.$message.error('请检查表单输入是否正确')
          return false
        }
      })
    },
    handleCancel() {
      this.$emit('cancel')
    },
    handleProjectChange(projectId) {
      this.$emit('project-change', projectId)
    },
    handleMaterialCodeChange(materialCode) {
      this.$emit('material-code-change', materialCode)
    },
    handleCurrentMaterialCodeChange(materialCode) {
      this.$emit('current-material-code-change', materialCode)
    }
  }
}
</script>

<style scoped>
.drawer-container {
  position: relative;
  height: 100%;
}

.drawer-content {
  padding: 20px;
  height: calc(100% - 60px);
  overflow-y: auto;
}

.drawer-footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 10px 20px;
  background-color: #fff;
  border-top: 1px solid #e8e8e8;
  text-align: right;
}
</style>
